<template>
  <basic-container>
    <avue-detail ref="form" v-model="form" :option="option"></avue-detail>
    <avue-crud ref="crud" :option="detailOption" :data="detailList">
      <!-- 绑定 -->
      <template slot="menu" slot-scope="scope">
        <v-relationSupply
          :row="scope.row"
          @refresh="refresh(scope.row.modelId, scope.row.$index)"
          :type="1"
        ></v-relationSupply>
      </template>
      <!-- 供应订单编号 -->
      <template slot="supplySn" slot-scope="scope">
        <span @click="supplyOrderSerial(scope.row)" style="color: #409EFF">{{scope.row.supplySn}}</span>
      </template>
      <!-- 供应商 -->
      <template slot="supplyId" slot-scope="scope">
        <div v-for="(item,index) in scope.row.supplyId" :key="index" style="display: flex">
          <el-tooltip placement="left-start">
            <div slot="content">
              商品名称11：{{item.goodsName}}
              <br />
              规格名称：{{item.modelName}}
              <br />
              单位：{{item.modelUnit}}
              <br />
              价格：{{item.modelPrice}}元
              <br />
              <span>图片：</span>
              <p>
                <!-- <img width="200px" style="margin-right:20px" :src="item.modelUrl"> -->
                <img width="100px" style="margin-top:10px" :src="item.modelUrl" />
              </p>
            </div>
            <el-button type="text" size="mini">{{item.merchantName}}：</el-button>
          </el-tooltip>
          <!-- 取消绑定 -->
          <v-relationSupply
            :row="scope.row"
            :Supply="item"
            @refresh="refresh(scope.row.modelId, scope.row.$index)"
            :type="0"
          ></v-relationSupply>
        </div>
      </template>
      <!-- 商品金额 -->
      <template slot="amount" slot-scope="scope">
        <span>{{scope.row.amount}}</span>
      </template>
    </avue-crud>
    <div class="goBackBtn">
      <el-button type="primary" @click="goBack">返 回</el-button>
    </div>
  </basic-container>
</template>
<script>
import vRelationSupply from "../goodsputaway/component/relationSupply";
import { tableOption } from "../../const/crud/supply/purchase_details";
import {
  platformModel,
  purchaseDetails,
  supplyOrderRelation
} from "../../api/supply/purchase_details";
// 列表行lable
import { tableOption as detailOption } from "../../const/crud/supply/details_option";
import { goBack } from "../../util/util";

export default {
  name: "purchase_details",
  components: {
    "v-relationSupply": vRelationSupply
  },

  data() {
    return {
      form: {},
      detailList: [],
      modelList: [],
      option: tableOption,
      detailOption: detailOption,
      // 选中的数据
      choseData: [],
      purchaseOption: [],
      data: [],
      buyOrderSn: "",
      customerSn: ""
    };
  },
  created() {},
  beforeRouteEnter(to, from, next) {
    next(
      vm => (
        (vm.buyOrderSn = vm.$route.query.res.buyOrderSn),
        (vm.customerSn = vm.$route.query.res.customerSn)
      )
    );
  },
  // 监听属性
  watch: {
    buyOrderSn: function(newValue, oldValue) {
      // 新值为空时使用已有的值
      this.getPurchaseDetails(oldValue && !newValue ? oldValue : newValue);
    }
  },
  methods: {
    // 返回按钮
    goBack(time = 1000) {
      goBack(this, time);
      return;
    },
    // 请求列表详情
    getPlatformModel(goodsModelId, index) {
      let params = {
        goodsModelId: goodsModelId
      };
      platformModel(params).then(res => {
        this.$set(this.detailList[index], "supplyId", res.data.data.modelList);
      });
    },
    // 接收供应-采购订单详情
    getPurchaseDetails(buyOrderSn) {
      if (!buyOrderSn) {
        this.goBack();
        return;
      }
      let params = {
        buyOrderSn: buyOrderSn
      };
      purchaseDetails(params)
        .then(res => {
          this.form = res.data.data;
          this.detailList = res.data.data.detailList;
          let that = this;
          supplyOrderRelation(params).then(res => {
            let relationDetailList = res.data.data.detailList;
            this.detailList.forEach(function(item, index) {
              for (let i = 0, len = relationDetailList.length; i < len; i++) {
                if (item.buyDetailSn === relationDetailList[i].buyDetailSn) {
                  that.$set(item, "supplySn", relationDetailList[i].supplySn);
                  break;
                }
              }
              that.$set(item, "amount", item.orderGoodsNum * item.buyPrice);
              // item.amount = item.orderGoodsNum * item.buyPrice;
            });
          });
          this.detailList.forEach(function(item, index) {
            that.getPlatformModel(item.modelId, index);
          });
        })
        .catch(() => {
          this.goBack();
        });
    },
    // 刷新当前行，
    refresh(goodsModelId, index) {
      this.getPlatformModel(goodsModelId, index);
    },
    supplyOrderSerial(row) {
      let query = {
        res: {
          supplySn: row.supplySn
        }
      };
      this.$router.push({ path: "/supply/supplyOrderDetail", query: query });
    }
  }
};
</script>
<style lang="scss" scoped>
body {
  padding: 0;
}

.v-modal {
  position: static;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
}

.avue-crud__img img {
  height: 100px;
  margin-left: 5px;
  -o-object-fit: contain;
  object-fit: contain;
  z-index: 999999;
}

.goBackBtn {
  margin: 40px 0 40px 0;
  border-radius: 10px;
}

body.theme-white {
  padding-right: 0;
  z-index: 999999;
}

body.el-popup-parent--hidden {
  padding-right: 0;
  z-index: 999999;
}

.el-dialog__wrapper {
  overflow: auto;
  margin: 0;
  z-index: 99999999;
}
</style>